<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
            - .lazy 取代 input 监听 change 事件【针对输入型表单元素】
            - .trim  输入首尾空格过滤【等效 JS 字符串的 trim 方法】
            - .number 输入字符串转为有效的数字【等效于 JS 中的 parseFloat 方法】
                                            【如果数据不能转为有效数值，或原字符串返回】
                vue2 必须手动调用修饰符 number 才能启动转化功能
                vue3 使用标签 input:number 输入框时，会自动完成修饰符number加载
        </pre>
        <p>flag:{{ flag }}</p>
        <input v-model="flag" type="checkbox" />
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <input v-model.lazy="msg" type="text" />
        <br><br>
        <pre>>|{{ info }}|<</pre>
        <input v-model="info" type="text" />
        <input v-model.trim="info" type="text" />
        <br><br>
        <p>num:{{ typeof(num) }}:{{ num }}</p>
        <input v-model="num" type="text" />
        <input v-model.number="num" type="text" />
        <input v-model="num" type="number" />

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:false,
                    msg:"msg",
                    info:"info",
                    num:100
                }
            }
        }).mount("#app");
    </script>
</body>
</html>